<template>
  <el-button class="chax" icon="Stamp" type="primary" v-print="printObj">打印</el-button>
  <!-- <el-button class="chax" icon="Stamp" type="primary" @click="print">打印</el-button> -->

  <div id="printTest">
    <div @click="viewJson">detail</div>
    <JsonEditorVue class="w-full h-[90%]" v-model="formLabelAlign.boundaries" :currentMode="'tree'"
      @update:modelValue="updateModelValue"></JsonEditorVue>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive
} from 'vue'
import JsonEditorVue from 'json-editor-vue'

interface FormLabelAlign {
  boundaries: any
}

let formLabelAlign = ref<FormLabelAlign>({
  boundaries: null
})
const updateModelValue = (val: unknown) => {
  console.log(val, "修改了值1");
  console.log(formLabelAlign.value.boundaries, "修改了值2");
}
const viewJson = async () => {
  try {
    const response = await fetch('/src/views/detail/boundary.geojson')
    const data = await response.json()
    formLabelAlign.value.boundaries = data
  } catch (error) {
    console.error('Error loading GeoJSON:', error)
  }
}


let printObj = reactive({
  id: "printTest", //绑定打印区域id，打印id名为printTest
  popTitle: "打印配置页上方的标题", //打印配置页上方的标题,
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },
});
// const print = () => {
//   window.print()
// }
</script>

<style lang="scss" scoped>
.chax {
  position: absolute;
  top: 10%;
  right: 20px;
}
</style>
<style media="print">
@page {
  size: auto;
  margin: 3mm;
}

@media print {
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }

  body {
    border: solid 1px #ffffff;
    /* margin: 10mm 15mm 10mm 15mm; */
  }

  #printMe table {
    table-layout: auto !important;
  }

  #printMe .el-table__header-wrapper .el-table__header {
    width: 100% !important;
    border: solid 1px #f2f2f2;
  }

  #printMe .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }

  #printMe #pagetable table {
    table-layout: fixed !important;
  }
}
</style>